<template>
	<div class="app-container calendar-list-container">
		<div name="searchColums">
			<el-form :inline="true" :model="filters" size="small" label-width="125px" ref="filters" class="searchForm">
				<el-form-item label="所属小区" prop="communityId">
					<el-select v-model="filters.communityId" placeholder="请选择" @change="handleSelectBuildingFilters">
						<el-option v-for="communitItem in communityOptionsFilters" :key="communitItem.id" :label="communitItem.name" :value="communitItem.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="楼宇" prop="buildingId">
					<el-select v-model="filters.buildingId" placeholder="请选择" @change="handleSelectUnitFilters">
						<el-option v-for="(buildingItem,index) in buildingOptionsFilters" :key="index" :label="buildingItem.name" :value="buildingItem.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="单元" prop="unitId">
					<el-select v-model="filters.unitId" placeholder="请选择" @change="handleSelectHouseFilters">
						<el-option v-for="(unitItem,index) in unitOptionsFilters" :key="index" :label="unitItem.name" :value="unitItem.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="房屋" prop="houseId">
					<el-select v-model="filters.houseId" placeholder="请选择">
						<el-option v-for="(houseItem,index) in houseOptionsFilters" :key="houseItem.id" :label="houseItem.houseName" :value="houseItem.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="el-form-item" label="缴费人名称" prop="payUserName">
					<el-input class="filter-item" v-model="filters.payUserName"></el-input>
				</el-form-item>
				<el-form-item class="el-form-item" label="费用类型" prop="feeType">
					<el-select size="small" v-model="filters.feeType" clearable placeholder="请选择">
						<el-option v-for="item in typeOptionsWhere" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<span class="bth_search">
          <el-form-item>
            <el-button type="success" icon="el-icon-search" v-on:click="getList(true)">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" @click="resetSearchForm('filters')">重置</el-button>
          </el-form-item>
        </span>
			</el-form>
		</div>
		<!--toolbar-->
		<el-row id="toolbar_unit">
			<el-col :span="24">
				<div class="grid-content bg-purple-light">
					<el-button v-if="payment_record_add" size="mini" @click="handleCreate" type="primary" icon="edit">添加
					</el-button>
					<el-button size="mini" @click="toHandlePrintPage" type="success" icon="edit">打印凭证
					</el-button>
				</div>
			</el-col>
		</el-row>
		<el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border size="mini" header-row-class-name="table_head_style" highlight-current-row style="width: 100%">
			<el-table-column align="center" type="index" label="序号">

			</el-table-column>
			<el-table-column align="center" label="费用类型">
				<template slot-scope="scope">
					<span>{{ scope.row.label }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="支付人">
				<template slot-scope="scope">
					<span>{{ scope.row.realname }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="所属小区">
				<template slot-scope="scope">
					<span>{{ scope.row.name }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="支付金额">
				<template slot-scope="scope">
					<span>{{ scope.row.payNumber }}元</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="支付时间">
				<template slot-scope="scope">
					<span>{{ scope.row.payDate }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="支付方式">
				<template slot-scope="scope">
					<span>{{ scope.row.feeModelName }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div v-show="!listLoading" class="pagination-container">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" @close="handleAddBeforeClose('form')">
			<el-form :model="form" :rules="rules" ref="form" label-width="100px">
				<el-col :span="8">
					<el-form-item label="所属小区" prop="communityId">
						<el-select size="small" v-model="form.communityId" placeholder="请选择" @change="handleSelectBuilding">
							<el-option v-for="communitItem in communityOptions" :key="communitItem.id" :label="communitItem.name" :value="communitItem.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="楼宇" prop="buildingId">
						<el-select size="small" v-model="form.buildingId" placeholder="请选择" @change="handleSelectUnit">
							<el-option v-for="(buildingItem,index) in buildingOptions" :key="index" :label="buildingItem.name" :value="buildingItem.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="单元" prop="unitId">
						<el-select size="small" v-model="form.unitId" placeholder="请选择" @change="handleSelectHouse">
							<el-option v-for="(unitItem,index) in unitOptions" :key="index" :label="unitItem.name" :value="unitItem.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="房屋" prop="houseId">
						<el-select size="small" v-model="form.houseId" placeholder="请选择" @change="handleSelectUser">
							<el-option v-for="(houseItem,index) in houseOptions" :key="houseItem.id" :label="houseItem.houseName" :value="houseItem.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="缴纳人" prop="payUser">
						<el-select size="small" v-model="form.payUser" placeholder="请选择">
							<el-option v-for="item in liftUserOptions" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="费用类型" prop="feeType">
						<el-select class="filter-item" v-model="form.feeType" :disabled="feeTypeDisebled" clearable placeholder="请选择" @change="handleSelectFeeType">
							<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="实用量" prop="usedNumber">
						<el-input v-model.number="form.usedNumber" size="small" placeholder="实用量" @blur="usedNumberBlur">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="月数" prop="timeLength">
						<el-input v-model.number="form.timeLength" size="small" placeholder="月数" @blur="timeLengthBlur">
							<template slot="append">月</template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="折扣" prop="zhekou">
						<el-input v-model.number="form.zhekou" size="small" placeholder="折扣" @blur="zhekouBlur">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="支付金额" prop="payNumber">
						<el-input v-model.number="form.payNumber" :disabled="payNumberDisabled" size="small" placeholder="支付金额">
							<template slot="append">元</template>
						</el-input>
					</el-form-item>
				</el-col>

				<el-col :span="8" v-if="shljInputVisible">
					<el-form-item label="垃圾折扣" prop="shljZheKou">
						<el-input v-model.number="form.shljZheKou" size="small" placeholder="折扣" @blur="zhekouShljBlur">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8" v-if="shljInputVisible">
					<el-form-item label="垃圾金额" prop="shljPayNumber">
						<el-input v-model.number="form.shljPayNumber" :disabled="shljPayNumberDisabled" size="small" placeholder="支付金额">
							<template slot="append">元</template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8" v-if="shljInputVisible">
					<el-form-item label="垃圾折扣说明" prop="shljBeizhu">
						<el-input v-model="form.shljBeizhu" size="small" placeholder="说明">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item label="折扣说明" prop="beizhu">
						<el-input v-model="form.beizhu" size="small" placeholder="说明">
						</el-input>
					</el-form-item>
				</el-col>

				<el-col :span="8">
					<el-form-item label="支付方式" prop="feeModel">
						<el-select class="filter-item" v-model="form.feeModel" clearable placeholder="请选择">
							<el-option v-for="item in feeModelOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="8">
					<el-form-item prop="validDate" label="起始日期">
						<el-date-picker type="date" :disabled="dataDisabled" placeholder="选择日期" v-model="form.validDate" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item prop="invalidDate" label="截至日期">
						<el-date-picker :disabled="dataDisabled" type="date" placeholder="选择日期" v-model="form.invalidDate" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
					</el-form-item>
				</el-col>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<span style="font-size: 12px;color: red;float:left">注：物业费包含生活垃圾处理费用;  水费和电费计算方式为单价*实用量;  </span>
				<el-button @click="cancel('form')">取 消</el-button>
				<el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button>
				<el-button v-else type="primary" @click="update('form')">修 改</el-button>
			</div>
		</el-dialog>

		<el-dialog title="打印预览" :visible.sync="printPageVisible" :close-on-click-modal="false" @close="handleAddBeforeClose('yulanForm')">
			<div name="searchColums">
				<el-form :inline="true" :model="yulanForm" :rules="yulanRules" ref="yulanForm" size="mini" label-width="100px" class="searchForm">
					<el-form-item label="所属小区" class="el-form-item" prop="communityId">
						<el-select size="mini" v-model="yulanForm.communityId" placeholder="请选择" @change="handleSelectBuilding">
							<el-option v-for="communitItem in communityOptions" :key="communitItem.id" :label="communitItem.name" :value="communitItem.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="楼宇" class="el-form-item" prop="buildingId">
						<el-select size="mini" v-model="yulanForm.buildingId" placeholder="请选择" @change="handleSelectUnit">
							<el-option v-for="(buildingItem,index) in buildingOptions" :key="index" :label="buildingItem.name" :value="buildingItem.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="单元" class="el-form-item" prop="unitId">
						<el-select size="mini" v-model="yulanForm.unitId" placeholder="请选择" @change="handleSelectHouse">
							<el-option v-for="(unitItem,index) in unitOptions" :key="index" :label="unitItem.name" :value="unitItem.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="房屋" class="el-form-item" prop="houseId">
						<el-select size="mini" v-model="yulanForm.houseId" placeholder="请选择">
							<el-option v-for="(houseItem,index) in houseOptions" :key="houseItem.id" :label="houseItem.houseName" :value="houseItem.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item class="el-form-item" label="费用类型" prop="feeType">
						<el-select size="mini" v-model="yulanForm.feeType" clearable placeholder="请选择">
							<el-option v-for="item in typeOptionsWhere" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item class="el-form-item" label="缴费日期" prop="payDate">
						<el-date-picker type="date" size="mini" placeholder="选择日期" v-model="yulanForm.payDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
					</el-form-item>

				</el-form>
			</div>
			<!--toolbar-->
			<el-row id="toolbar_unit">
				<el-col :span="24">
					<div class="grid-content bg-purple-light">
						<el-button v-if="payment_record_add" size="mini" @click="handleYulan" type="primary" icon="edit">预览
						</el-button>
						<el-button size="mini" @click="handlePrintPage" type="success" icon="edit">打印
						</el-button>
					</div>
				</el-col>
			</el-row>
			<div id="printOrder-data" style="align-content: center;" v-loading="listPrintLoading">
				<!--<el-row :gutter="20">
					<el-col :span="5">小区：<span style="font-size: 12px;">{{communityName}}</span></el-col>
					<el-col :span="5" :offset="2">房号：<span style="font-size: 12px;">{{houseNum}}</span></el-col>
					<el-col :span="2" :offset="1">业主：<span style="font-size: 12px;">{{ownerName}}</span></el-col>
					<el-col :span="4" :offset="1">日期：<span style="font-size: 12px;">{{currentDate | dateFormat}}</span></el-col>
				</el-row>-->
				<!--<el-table id="printGrid"  :data="listPrintDat" v-loading="listPrintLoading" element-loading-text="给我一点时间" border size="mini" header-row-class-name="table_head_style" highlight-current-row >

					<el-table-column align="center" label="费用类型" prop="feeType" ></el-table-column>
					<el-table-column align="center" label="起始日期" prop="validDate"></el-table-column>
					<el-table-column align="center" label="截至日期" prop="invalidDate"></el-table-column>
					<el-table-column align="center" label="单价" prop="dj"></el-table-column>
					<el-table-column align="center" label="费用金额" prop="zje"></el-table-column>
					<el-table-column align="center" label="实用量" prop="usedNumber"></el-table-column>
					<el-table-column align="center" label="优惠" prop="yhje"></el-table-column>
					<el-table-column align="center" label="本次实收" prop="zfje"></el-table-column>
				</el-table>-->
				<table style="width: 95%;">
					<tr style="font-family: '黑体';font-size: 16px;">
						<td colspan="18" align="center" style="font-family: '黑体';font-size: 25px;">收款收据</td>
					</tr>
					<tr height="10px;"></tr>
					<tr>
						<td>小区:</td>
						<td colspan="4" align="left">{{communityName}}</td>
						<td>房号:</td>
						<td colspan="4" align="left">{{houseNum}}</td>
						<td>业主:</td>
						<td colspan="3" align="left">{{ownerName}}</td>
						<td>日期:</td>
						<td colspan="4" align="left">{{currentDate | dateFormat}}</td>

					</tr>
				</table>
				<table border="1px" bordercolor="black" style="width: 95%;border-collapse:collapse;">
					<thead>
						<th>费用类型</th>
						<th>起始日期</th>
						<th>截至日期</th>
						<th>单价</th>
						<th>费用金额</th>
						<th>实用量</th>
						<th>优惠</th>
						<th>本次实收</th>
					</thead>
					<tbody id="printTBody">

					</tbody>
				</table>
			</div>

		</el-dialog>

	</div>
</template>

<script>
	import { fetchList, addObj, putObj, delObj, getObj, getDic } from '@/api/payment_record'
	import waves from '@/directive/waves/index.js' // 水波纹指令
	import { mapGetters } from 'vuex'
	import request from "@/router/axios";
	import { formatDate } from '@/api/date'

	export default {
		name: 'table_payment_record',
		directives: {
			waves
		},
		data() {
			return {
				list: null,
				listPrintDat: null,
				total: null,
				listLoading: true,
				typeOptions: ['0', '1', '2', '3', '4'],
				typeOptionsWhere: ['0'],
				feeModelOptions: [],
				shljPayNumber: "",
				payNumber: "",
				currentDate: new Date(),
				feeTypeDisebled: true,
				listQuery: {
					page: 1,
					limit: 20,
					payUserName: '',
					feeType: ''
				},
				filters: {
					payUserName: '',
					feeType: '',
					communityId: "",
					buildingId: "",
					unitId: "",
					houseId: ''
				},
				communityOptions: [],
				buildingOptions: [],
				unitOptions: [],
				houseOptions: [],
				liftUserOptions: [{
					id: '',
					name: ''
				}],
				communityOptionsFilters: [],
				buildingOptionsFilters: [],
				unitOptionsFilters: [],
				houseOptionsFilters: [],
				yulanForm: {
					communityId: "",
					buildingId: "",
					unitId: "",
					feeType: "",
					payDate: null,
					houseId: ''
				},
				yulanRules: {
					houseId: [{
						required: true,
						message: '请选择房屋'
					}]
				},
				rules: {
					payUser: [{
						required: true,
						message: '请选择缴纳人'
					}],
					feeType: [{
						required: true,
						message: '请选择费用类型'
					}],
					timeLength: [{
							validator: function(rule, value, callback) {
								if(value == null || value == "") {
									callback();
								}
								if(!Number.isInteger(value)) {
									callback(new Error('请输入整数数字'));
								} else {
									callback();
								}
							}
						}

					],
					zhekou: [{
						validator: function(rule, value, callback) {
							if(value == null || value == "") {
								callback();
							}
							if(isNaN(value)) {
								callback(new Error('请输入数字'));
							} else {
								callback();
							}

						}
					}],
					shljZheKou: [{
						validator: function(rule, value, callback) {
							if(value == null || value == "") {
								callback();
							}
							if(isNaN(value)) {
								callback(new Error('请输入数字'));
							} else {
								callback();
							}

						}
					}],
					usedNumber: [{
							validator: function(rule, value, callback) {
								if(value == null || value == "") {
									callback();
								}
								if(isNaN(value)) {
									callback(new Error('请输入数字'));
								} else {
									callback();
								}
							}
						}

					],
					shljPayNumber: [{
						type: 'number',
						message: '请输入数字'
					}],
					payNumber: [{
							type: 'number',
							message: '请输入数字'
						},
						{
							required: true,
							message: '请输入金额'
						}
					]
				},
				form: {
					communityId: '',
					buildingId: '',
					unitId: "",
					houseId: "",
					payUser: "",
					feeType: "",
					feeModel: "",
					invalidDate: "",
					validDate: "",
					usedNumber: "",
					beizhu: "",
					zhekou: "",
					timeLength: "",
					payNumber: "",
					shljPayNumber: "",
					shljZheKou: "",
					shljBeizhu: ""
				},
				dialogFormVisible: false,
				dialogStatus: '',
				payment_record_add: true,
				printPageVisible: false,
				shljInputVisible: false,
				listPrintLoading: false,
				yulanFlag: false,
				payNumberDisabled: false,
				shljPayNumberDisabled: false,
				communityName: "",
				wyf_zhouqi: "",
				houseNum: "",
				ownerName: "",
				elecPrice: "",
				waterPrice: "",
				textMap: {
					update: '编辑',
					create: '创建'
				},
				dataDisabled: true,
				tableKey: 0
			}
		},
		computed: {
			...mapGetters([
				'permissions'
			])
		},
		filters: {
			statusFilter(status) {
				const statusMap = {
					0: '有效',
					1: '无效'
				}
				return statusMap[status]
			},
			dateFormat: function(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd');
			}
		},
		created() {
			this.getList()
			this.initData()
		},
		methods: {

			//初始化下拉框
			initData: function() {
				request.get("/admin/community?getCommunitysByUserId").then((res) => {

					if(res.status === 200) {
						this.communityOptions = res.data;
						this.communityOptionsFilters = res.data;
					}
				});
				getDic("fee_type").then(res => {
					if(res.status === 200) {
						var data = res.data;
						this.typeOptionsWhere = [].concat(data);
						for(var i = 0; i < data.length; i++) {
							if(data[i].value == "6") {
								data.splice(i, 1);
							}
						}
						this.typeOptions = data;
					}
				});
				getDic("fee_model").then(res => {
					if(res.status === 200) {
						this.feeModelOptions = res.data;
					}
				});
			},
			handleSelectBuilding() {
				if(this.printPageVisible) {
					this.yulanForm.buildingId = '';
					this.yulanForm.unitId = '';
					this.yulanForm.houseId = '';
				} else {
					this.form.buildingId = '';
					this.form.unitId = '';
					this.form.houseId = '';
					this.form.payUser = '';
					this.form.feeType = '';
					this.feeTypeDisebled = true;
					this.liftUserOptions = [{
						id: '',
						name: ''
					}]
				}
				this.buildingOptions = [];
				this.unitOptions = [];
				this.houseOptions = [];
				request.get("/admin/communityBuilding/getCommunityBuildings/" + (this.printPageVisible ? this.yulanForm.communityId : this.form.communityId)).then((res) => {
					if(res.status === 200) {
						this.buildingOptions = res.data
					}
				});
			},
			handleSelectUnit() {
				if(this.printPageVisible) {
					this.yulanForm.unitId = '';
					this.yulanForm.houseId = '';
				} else {
					this.form.unitId = '';
					this.form.houseId = '';
					this.form.payUser = '';
					this.form.feeType = '';
					this.feeTypeDisebled = true;
					this.unitOptions = [];
					this.houseOptions = [];
					this.liftUserOptions = [{
						id: '',
						name: ''
					}]
				}

				request.get("/admin/communityBuilding/getBuildingUnits/" + (this.printPageVisible ? this.yulanForm.buildingId : this.form.buildingId)).then((res) => {
					if(res.status === 200) {
						// 判断楼宇下单元数据是否为空
						if(res.data.length === 0) {
							// 说明该楼宇下没有单元数据，直接去获取到房屋列表
							this.unitOptions = [];
							request.get("/admin/unitHouse/getUnitHousesByBuildingId/" + (this.printPageVisible ? this.yulanForm.buildingId : this.form.buildingId)).then((res) => {
								if(res.status === 200) {
									this.houseOptions = res.data
								}
							});
						} else {
							this.unitOptions = res.data;
						}
					}
				});
			},
			handleSelectHouse() {
				if(this.printPageVisible) {
					this.yulanForm.houseId = '';
				} else {
					this.form.houseId = '';
					this.form.payUser = '';
					this.form.feeType = '';
					this.feeTypeDisebled = true;
					this.houseOptions = [];
					this.liftUserOptions = [{
						id: '',
						name: ''
					}]
				}

				request.get("/admin/unitHouse/getUnitHouses/" + (this.printPageVisible ? this.yulanForm.unitId : this.form.unitId)).then((res) => {
					if(res.status === 200) {
						this.houseOptions = res.data;
					}
				});
			},
			handleSelectUser() {
				this.feeTypeDisebled = false;
				this.form.payUser = '';
				this.form.feeType = '';
				this.liftUserOptions = [{
					id: '',
					name: ''
				}]
				request.get("/admin/houseOwner/getHouseOwners/" + this.form.houseId).then((res) => {
					if(res.status === 200) {
						this.liftUserOptions = res.data;
					}
				});
			},
			handleSelectFeeType() {
				if(this.form.feeType == "0") {
					this.dataDisabled = true;
					this.shljInputVisible = true;
					this.payNumberDisabled = true;
					this.shljPayNumberDisabled = true;
				} else if(this.form.feeType == "1" || this.form.feeType == "2" || this.form.feeType == "5") {
					this.payNumberDisabled = true;
					this.dataDisabled = false;
					this.shljInputVisible = false;
					this.shljPayNumberDisabled = false;
					this.form.payNumber = 0;
				} else {
					this.dataDisabled = false;
					this.shljInputVisible = false;
					this.payNumberDisabled = false;
					this.shljPayNumberDisabled = false;
				}
				this.form.zhekou = "";
				this.form.usedNumber = "";
				this.form.shljZheKou = "";
				this.form.beizhu = "";
				this.form.shljBeizhu = "";
				this.form.shljPayNumber = "";
				let para = {
					houseId: this.form.houseId,
					communityId: this.form.communityId,
					feeType: this.form.feeType
				};
				request.get("/admin/paymentRecord/getPayInfo", {
					params: para
				}).then((res) => {
					if(res.data.success) {
						var data = res.data.obj;
						if(data.zhouqi) {
							this.form.timeLength = data.zhouqi;
							this.wyf_zhouqi = data.zhouqi;
						} else {
							this.form.timeLength = "";
						}
						if(data.valid_date) {
							this.form.validDate = data.valid_date;
						} else {
							this.form.validDate = "";
						}
						if(data.invalid_date) {
							this.form.invalidDate = data.invalid_date;
						} else {
							this.form.invalidDate = "";
						}
						if(data.fee) {
							this.form.payNumber = data.fee;
							this.payNumber = data.fee;
						} else {
							this.form.payNumber = 0;
						}
						if(data.shljfee) {
							this.form.shljPayNumber = data.shljfee;
							this.shljPayNumber = data.shljfee;
						} else {
							this.form.shljPayNumber = "";
						}
						if(data.waterPrice) {
							this.waterPrice = data.waterPrice;
						}
						if(data.elecPrice) {
							this.elecPrice = data.elecPrice;
						}

					}
				});
			},
			getList(flag) {
				if(flag){
					this.listQuery.page=1;
				}
					
				this.listLoading = true
				this.listQuery.payUserName = this.filters.payUserName;
				this.listQuery.feeType = this.filters.feeType;
				this.listQuery.communityId = this.filters.communityId;
				this.listQuery.buildingId = this.filters.buildingId;
				this.listQuery.unitId = this.filters.unitId;
				this.listQuery.houseId = this.filters.houseId;
				fetchList(this.listQuery).then(response => {
					this.list = response.data.records
					this.total = response.data.total
					this.listLoading = false
				})
			},
			handleSizeChange(val) {
				this.listQuery.limit = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.listQuery.page = val
				this.getList()
			},
			handleDelete(row) {
				delObj(row.id)
					.then(response => {
						this.dialogFormVisible = false
						this.getList()
						this.$notify({
							title: '成功',
							message: '删除成功',
							type: 'success',
							duration: 2000
						})
					})
			},
			handleCreate() {
				this.dialogStatus = 'create'
				this.dialogFormVisible = true
			},
			handleUpdate(row) {
				this.listLoading = true
				getObj(row.id)
					.then(response => {
						this.form = response.data.obj;
						this.dialogFormVisible = true;
						this.dialogStatus = "update";
						this.listLoading = false
					});

			},
			create(formName) {
				const set = this.$refs;
				set[formName].validate(valid => {
					if(valid) {
						addObj(this.form)
							.then((data) => {
								if(data.data.success) {
									this.dialogFormVisible = false
									this.getList()
									this.$notify({
										title: '成功',
										message: '创建成功',
										type: 'success',
										duration: 2000
									})
								} else {
									this.$notify({
										title: '失败',
										message: data.data.msg,
										type: 'error',
										duration: 2000
									})
								}

							})
					} else {
						return false
					}
				})
			},
			resetSearchForm(formName) {
				this.buildingOptionsFilters = [];
				this.unitOptionsFilters = [];
				this.houseOptionsFilters = [];
				this.$refs.filters.resetFields();
			},
			handleAddBeforeClose(form) {

				const set = this.$refs;
				set[form].resetFields();
				if("yulanForm" == form) {
					this.yulanFlag = false;
				} else {
					this.payNumberDisabled = true;
					this.shljPayNumberDisabled = false;
					this.shljInputVisible = false;
					this.feeTypeDisebled = true;
				}
			},
			cancel(formName) {
				this.dialogFormVisible = false
				const set = this.$refs
				set[formName].resetFields()
			},
			update(formName) {
				const set = this.$refs
				set[formName].validate(valid => {
					if(valid) {
						this.dialogFormVisible = false
						this.form.password = undefined
						putObj(this.form).then(() => {
							this.dialogFormVisible = false
							this.getList()
							this.$notify({
								title: '成功',
								message: '修改成功',
								type: 'success',
								duration: 2000
							})
						})
					} else {
						return false
					}
				})
			},
			toHandlePrintPage: function() {
				this.printPageVisible = true;
			},
			zhekouBlur: function() {
				var zhekou = this.form.zhekou;
				if(zhekou.length == 0) {
					return;
				}
				if(zhekou == 0) {
					this.form.payNumber = 0;
					return;
				}
				if(this.form.feeType == "0") {
					if(zhekou && this.payNumber) {
						this.form.payNumber = Number(((this.payNumber) * zhekou).toFixed(2));
					}
				} else {
					if(zhekou && this.form.payNumber) {
						this.form.payNumber = Number(((this.form.payNumber) * zhekou).toFixed(2));
					}
				}

			},
			zhekouShljBlur: function() {
				var shfzhekou = this.form.shljZheKou;
				if(shfzhekou.length == 0) {
					return;
				}
				if(shfzhekou == 0) {
					this.form.shljPayNumber = 0;
					return;
				}
				if(shfzhekou && this.shljPayNumber) {
					this.form.shljPayNumber = Number(((this.shljPayNumber) * (shfzhekou)).toFixed(2));
				}
			},
			usedNumberBlur: function() {
				if(this.form.feeType == "1" && this.waterPrice && this.form.usedNumber) { //水费
					this.form.payNumber = Number(((this.waterPrice) * (this.form.usedNumber)).toFixed(2));
				}
				if(this.form.feeType == "2" && this.elecPrice && this.form.usedNumber) { //电费
					this.form.payNumber = Number(((this.elecPrice) * (this.form.usedNumber)).toFixed(2));
				}

			},
			handleSelectBuildingFilters() {
				this.filters.buildingId = ''
				this.filters.unitId = ''
				this.filters.houseId = ''
				request
					.get(
						'/admin/communityBuilding/getCommunityBuildings/' +
						this.filters.communityId
					)
					.then(res => {
						if(res.status === 200) {
							this.buildingOptionsFilters = res.data
						}
					})
			},
			handleSelectUnitFilters() {
				this.filters.unitId = ''
				this.filters.houseId = ''
				request
					.get(
						'/admin/communityBuilding/getBuildingUnits/' + this.filters.buildingId
					)
					.then(res => {
						if(res.status === 200) {
							// 判断楼宇下单元数据是否为空
							if(res.data.length === 0) {
								// 说明该楼宇下没有单元数据，直接去获取到房屋列表
								this.unitOptionsFilters = []
								request
									.get(
										'/admin/unitHouse/getUnitHousesByBuildingId/' +
										this.filters.buildingId
									)
									.then(res => {
										if(res.status === 200) {
											this.houseOptionsFilters = res.data
										}
									})
							} else {
								this.unitOptionsFilters = res.data
							}
						}
					})
			},
			handleSelectHouseFilters() {
				this.filters.houseId = ''
				request
					.get('/admin/unitHouse/getUnitHouses/' + this.filters.unitId)
					.then(res => {
						if(res.status === 200) {
							this.houseOptionsFilters = res.data
						}
					})
			},
			timeLengthBlur: function() {
				var ys = this.form.timeLength;
				if(ys && this.form.feeType == 0) {
					var para = {
						yf: ys,
						validDate: this.form.validDate
					}
					this.form.payNumber = Number((((this.payNumber) / this.wyf_zhouqi) * ys).toFixed(2));
					if(this.form.shljPayNumber) {
						this.form.shljPayNumber = Number((((this.shljPayNumber) / this.wyf_zhouqi) * ys).toFixed(2));
					}

					//获取失效时间
					request.get("/admin/paymentRecord/getInvalidDate", {
						params: para
					}).then((res) => {
						if(res.data.success) {
							var data = res.data.obj;
							this.form.invalidDate = data.invalid_date;

						}
					});
				}
			},
			handlePrintPage: function() {
				if(!this.yulanFlag) {
					this.$notify({
						title: '提示',
						message: '请先预览,再进行打印',
						type: 'info',
						duration: 2000
					})
					return false;
				}
				var newstr = document.getElementById('printOrder-data').innerHTML;
				var tab = window.open("", "打印");
				tab.document.open();
				//          tab.document.write("<link type='text/css' rel='stylesheet' href='/static/cdn/element-ui/2.4.0/theme-chalk/index.css'/>");
				tab.document.write(newstr);
				tab.document.close();
				//				document.body.innerHTML = newstr
				tab.window.print()
				// 重新加载页面，以刷新数据
				//				window.location.reload()
			},
			handleYulan: function() {
				this.$refs.yulanForm.validate(valid => {
					if(valid) {
						let para = {
							params: {
								feeType: this.yulanForm.feeType,
								houseId: this.yulanForm.houseId,
								payDate: this.yulanForm.payDate
							}
						}
						this.listPrintLoading = true;
						request.get("/admin/paymentRecord/printPage", para).then(res => {
							var printTBody = document.getElementById('printTBody');
							if(res.data.success) {
								//								this.listPrintDat = res.data.obj.list;
								this.communityName = res.data.obj.communityName;
								this.houseNum = res.data.obj.houseNum;
								this.ownerName = res.data.obj.ownerName;
								this.yulanFlag = true;
								var list = res.data.obj.list;

								var td = "";
								for(var i = 0; i < list.length; i++) {
									//									var row=document.createElement("row");
									//									var td=document.createElement("td");
									//									td.createTextNode(list.feeType);
									//									row.appendChild(td);
									//									var td=document.createElement("td");
									//									td.createTextNode(list.validDate);
									//									row.appendChild(td);
									//									var td=document.createElement("td");
									//									td.createTextNode(list.invalidDate);
									//									row.appendChild(td);
									//									var td=document.createElement("td");
									//									td.createTextNode(list.dj);
									//									row.appendChild(td);
									//									var td=document.createElement("td");
									//									td.createTextNode(list.zje);
									//									row.appendChild(td);
									//									var td=document.createElement("td");
									//									td.createTextNode(list.usedNumber);
									//									row.appendChild(td);
									//									var td=document.createElement("td");
									//									td.createTextNode(list.yhje);
									//									row.appendChild(td);
									//									var td=document.createElement("td");
									//									td.createTextNode(list.zfje);
									//									row.appendChild(td);
									//									printTBody.appendChild(row);
									td += "<tr >";
									td = td + "<td style='vertical-align: middle;text-align: center;'>" + list[i].feeType + "</td>";
									td = td + "<td style='vertical-align: middle;text-align: center;'>" + list[i].validDate + "</td>";
									td = td + "<td style='vertical-align: middle;text-align: center;'>" + list[i].invalidDate + "</td>";
									td = td + "<td style='vertical-align: middle;text-align: center;'>" + list[i].dj + "</td>";
									td = td + "<td style='vertical-align: middle;text-align: center;'>" + list[i].zje + "</td>";
									td = td + "<td style='vertical-align: middle;text-align: center;'>" + list[i].usedNumber + "</td>";
									td = td + "<td style='vertical-align: middle;text-align: center;'>" + list[i].yhje + "</td>";
									td = td + "<td style='vertical-align: middle;text-align: center;'>" + list[i].zfje + "</td>";
									td += "</tr>";
								}

							}
							printTBody.innerHTML = td;
							this.listPrintLoading = false

						})

					} else {
						return false;
					}
				})

			}

		}
	}
</script>